<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- MVVM架构  
 M:model 数据  
 V: View  页面
 VM:ViewModel 监听器
 V:view   -->
               <body>
                <div id="app">
                    <h2>{{ msg }}</h2>
                    <input type="text" v-model="msg">
                    <p>输入框中的内容是：{{ msg }}</p>
                    <div class="form-container">
                        <label>用户名:</label>
                        <input type="text" v-model="user.name">
                        <label>年龄:</label>
                        <input type="text" v-model="user.age">
                        <label>性别:</label>
                        <input type="text" v-model="user.sex">
                        <label>爱好:</label>
                        <input type="text" v-model="user.hobby">
                        <label>地址:</label>
                        <input type="text" v-model="user.address">
                        <button @click="saveUser(user)">保存</button>
                    </div>
                    <div class="table-container">
                        <table v-if="users.length > 0">
                            <tr>
                                <th>用户名</th>
                                <th>年龄</th>
                                <th>性别</th>
                                <th>爱好</th>
                                <th>地址</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(user, index) in users" :key="index">
                                <td>{{ user.name }}</td>
                                <td>{{ user.age }}</td>
                                <td>{{ user.sex }}</td>
                                <td>{{ user.hobby }}</td>
                                <td>{{ user.address }}</td>
                                <td><button class="delete-button" @click="users.splice(index, 1)">删除</button></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            user: {},
            users: []
        },
        methods: {
            saveUser(user) {
                if (user.name && user.age && user.sex && user.hobby && user.address) {
                    this.users.push({ ...user });
                    this.user = {};
                } else {
                    alert('请填写所有信息');
                }
            }
        }
    });
</script>